<template>
    <div class="pagination-container">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import{toRefs,reactive} from 'vue'
    export default {    
        props: ['currentPage', 'pageSize', 'total', 'handleSizeChange', 'handleCurrentChange'],
        setup(props){
            return{
                ...toRefs(props)
            }
        }
    }
</script>

<style scoped>
    .pagination-container {
        margin-top: 30px;
    }

</style>